<template>
  <q-page class="row items-center justify-evenly">
    <example-component
      title="Example component"
      active
      :todos="todos"
      :meta="meta"
    ></example-component>
    <q-card>
      <q-card-section>
        <test1
          :test-arr="this.testArr"
        />
      </q-card-section>
      <q-card-section>
        <test2
          title="hey U"
          :test-arr="this.testArr"
        />
      </q-card-section>
    </q-card>
  </q-page>
</template>

<script lang="ts">
import { Todo, Meta } from 'components/models';
import ExampleComponent from 'components/ClassComponent.vue';
import Test1 from 'components/Test1.vue';
import Test2 from 'components/Test2.vue';
import { Vue, Component } from 'vue-property-decorator';

@Component({
  components: { ExampleComponent, Test1, Test2 }
})
export default class Main extends Vue {
  testArr:number[] = ['yx', 'xy', 'zf', 'fz']
  todos: Todo[] = [
    {
      id: 1,
      content: 'yd'
    },
    {
      id: 2,
      content: 'yx'
    },
    {
      id: 3,
      content: 'gyj'
    },
    {
      id: 4,
      content: 'zfy'
    },
    {
      id: 5,
      content: 'wy'
    }
  ];
  meta: Meta = {
    totalCount: 1200
  };
};
</script>
